<template>
  <a-card title="通用表格">
    <vp-dynamic-table
      :call-server="callServer"
      :search-list="searchList"
      rowKey="key"
      :columns="columns"
      :row-selection="{
        selectedRowKeys: state.selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <template #operate>
        <a-button type="primary">新建</a-button>
      </template>
    </vp-dynamic-table>
  </a-card>
</template>
<script lang="ts" setup>
import { reactive, ref, createVNode } from "vue";
import ax from "@/utils/axios";
const state = reactive<{
  selectedRowKeys: string[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});
const onSelectChange = (selectedRowKeys: string[]) => {
  console.log("selectedRowKeys changed: ", selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};
const dataSource = ref<any>([
  {
    id: "1",
    name: "胡彦斌",
    age: 32,
    address: "西湖区湖底公园1号",
  },
  {
    id: "2",
    name: "胡彦祖",
    age: 42,
    address: "西湖区湖底公园1号",
  },
]);
const searchList = ref<any>([
  {
    type: "Input",
    label: "大萨",
    field: "name",
    value: "",
    span: 8,
    props: {
      placeholder: "请输入任务名称",
    },
  },
  {
    type: "Select",
    label: "软件版本",
    field: "softwareVersionId",
    span: 8,
    props: {
      placeholder: "请选择软件版本",
    },
    asyncOptions: () => {
      return new Promise<void>((resolve, reject) => {
        resolve();
      });
    },
  },
  {
    type: "Select",
    label: "硬件版本",
    field: "hardwareVersionId",
    span: 8,
    props: {
      placeholder: "请选择硬件版本",
    },
    asyncOptions: () => {
      return new Promise<void>((resolve, reject) => {
        resolve();
      });
    },
  },
  {
    type: "Select",
    label: "状态",
    field: "onlineStatus",
    span: 8,
    props: {
      placeholder: "请选择在线状态",
    },
    options: [
      { label: "在线", value: 1 },
      { label: "离线", value: 2 },
    ],
  },
  // {
  //   type: "Input",
  //   label: "大萨达奥",
  //   field: "name",
  //   value: "",
  //   span: 8,
  //   props: {
  //     placeholder: "请输入任务名称",
  //   },
  // },
  // {
  //   type: "Input",
  //   label: "大萨达奥",
  //   field: "name",
  //   value: "",
  //   span: 8,
  //   props: {
  //     placeholder: "请输入任务名称",
  //   },
  // },
  // {
  //   type: "Input",
  //   label: "大萨达奥",
  //   field: "name",
  //   value: "",
  //   span: 8,
  //   props: {
  //     placeholder: "请输入任务名称",
  //   },
  // },
]);
const columns = ref<any>([
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    headerRender: (column) => {
      return createVNode("div", {}, column.key);
    },
    render: (item) => {
      return createVNode("div", {}, item.name);
    },
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
    sorter: true,
    onSort: (order) => {
      console.log(order);
    },
  },
  {
    title: "住址",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "操作",
    key: "action",
    actions: [
      {
        text: "123",
        props: {
          type: "primary",
        },
        func: (item) => {
          console.log(item);
        },
      },
      {
        text: "234",
        type: "popconfirm",
        content: "asdsa?",
        func: (item) => {
          console.log(item);
        },
      },
      {
        text: "234",
        type: "dropdown",
        content: "asdsa?",
        func: (item) => {
          console.log(item);
        },
      },
    ],
  },
]);
const getList = (filters) => {
  return new Promise<void>((resolve, reject) => {
    setTimeout(() => {
      let result: any = {
        current: 1,
        pages: 2,
        records: [
          {
            key: "1",
            name: "胡彦斌",
            age: 32,
            address: "西湖区湖底公园1号",
          },
          {
            key: "2",
            name: "胡彦祖",
            age: 42,
            address: "西湖区湖底公园1号",
          },
        ],
        size: 20,
        total: 30,
      };
      resolve(result);
    }, 500);
  });
};
const getList1 = (filters) => {
  return ax.request({
    url: "dadsada/asdasdsa",
    method: "post",
    data: filters,
  });
};
const callServer = (filters) => {
  return getList1(filters);
};
</script>
